<template>
	<u-popup
		mode="bottom"
		bgColor="transparent"
		closeable
		:safeAreaInsetBottom="false"
		:show="showCar"
		@open="openCar"
		@close="closeCar">
		<view class="car-popup">
			<view class="car-popup-title main-flex">金额明细</view>
			<view class="car-popup-content">
				<view class="car-popup-content-t">实际金额以订单结算页为准</view>
				<view class="car-popup-content-b">
					<view class="car-popup-content-item main-flex">
						<view class="car-popup-content-item-name">商品金额</view>
						<view class="car-popup-content-item-text">￥{{total.originalPrice ? moneyStr(total.originalPrice) : '0.00'}}</view>
					</view>
					<view class="car-popup-content-item main-flex">
						<view class="car-popup-content-item-name">优惠券</view>
						<view class="car-popup-content-item-text">-￥{{total.discountPrice ? moneyStr(total.discountPrice) : '0.00'}}</view>
					</view>
					<view class="car-popup-content-item car-popup-content-total main-flex">
						<view class="car-popup-content-item-name">合计</view>
						<view class="car-popup-content-item-text price">￥{{total.actualPrice ? moneyStr(total.actualPrice) : '0.00'}}</view>
					</view>
					<view class="car-popup-btn">
						<view class="car-popup-btn-item main-flex" @click="closeCar">我知道了</view>
					</view>
				</view>
			</view>
		</view>
	</u-popup>
</template>

<script setup>
  /**
   * CarPopup 购物车计算
   * @description 购物车计算
   * @property {Object} total 购物车计算信息
   * @event {Function} close 关闭
   */
	import { computed, onMounted, ref, watch } from "vue"
	import useUserStore from "@/store/modules/user"
	import modal from '@/plugins/modal'
	
	const userStore = useUserStore()
	const props = defineProps({
		showCar: {
			type: Boolean,
			default: false 
		},
		total: {
			type: Object,
			default: {}
		}
	})
	
	const emits = defineEmits(['close'])
	const openCar = () => {
		
	}
	const closeCar = () => {
		emits('close')
	}
</script>

<style lang="scss" scoped>
  .car-popup {
		border-radius: 20rpx 20rpx 0rpx 0rpx;
		background-color: #ffffff;
		padding: 0 15px;
		// padding-bottom: var(--window-bottom);
		// padding-bottom: 100rpx;
		&-title {
			height: 48px;
			font-size: 16px;
			font-weight: 600;
			text-align: center;
			justify-content: center;
		}
		&-content {
			&-t {
				font-size: 28rpx;
				color: $text-light;
			}
			&-b {
				border-top: 1px solid $line-color;
				margin-top: 10rpx;
				padding: 10rpx 0 15px;
			}
			&-item {
				&-name {
					font-size: 28rpx;
				}
				&-text {
					font-size: 28rpx;
					margin-left: auto;
				}
			}
			&-total {
				margin-top: 12rpx;
			}
		}
		&-btn {
			&-item {
				margin-top: 80rpx;
				width: 100%;
				height: 64rpx;
				border-radius: 32rpx;
				background-color: $primary-color;
				color: #ffffff;
				font-size: 28rpx;
				font-weight: 600;
				justify-content: center;
			}
		}
	}
</style>
